<template>
    <!-- 做加载条,用nowStatus类来应该显示的效果 -->
    <div class="loading-bar" :class="getAppLoadingStatus">
        <!-- ???? -->
        <span class="press"></span>
    </div>

    <!-- 主体部分 -->
    <div class="app-init">
        <!-- 做过渡动画 transitionName 针对每个不同的页面做不同的过渡效果-->
        <!-- vue3的router的写法 -->
         <router-view v-slot="{Component}">
              <transition :name="transitionName">
                  <component :is="Component"></component>
              </transition>              
         </router-view>
    </div>

    <!-- 下端功能栏 -->
    <footer class="footer  clear" :class="{leave: leave}">
        <div class="footer-item" :class="{active: isActive('home')}" @click="open('/home')">
          <p class="icon">
            <span class="iconfont icon-shouye"></span>
          </p>
          <p class="name">首页</p>
        </div>

        <div class="footer-item" :class="{active: isActive('classification')}" @click="open('/classification')">
          <p class="icon">
            <span class="iconfont icon-fenlei"></span>
          </p>
          <p class="name">分类</p>
        </div>
        
       <div class="footer-item shop-car" :class="{ 'active': isActive('shoppingcart') }" @click="open('/shoppingcart')">
          <p class="icon">
            <span class="iconfont icon-gouwuche"></span>
          </p>
          <p class="name">购物车</p>
          <span class="num" v-show="cCount>0" :class="{ 'full': parseInt(cCount)>= 99}">{{ cCount > 99 ? '99+' : cCount }}</span>
      </div>

        <div class="footer-item" :class="{ 'active': isActive('mine') }" @click="open('/mine')">
          <p class="icon">
            <span class="iconfont icon-smile"></span>
          </p>
          <p class="name">我的</p>
        </div>
    </footer>
</template>

<script>

import {mapGetters} from 'vuex'
import ShopCartTool from './utils/shopcart'


export default {
  name: 'App',
  data(){
    return {
      transitionName :'slide-go',
    }
  },
  components: {

  },
  computed:{
    //下端选择栏是否隐藏
    leave(){
      return (this.isActive('shoppingcart')&&this.getCommodityCount()>0)||this.isActive('detail')
    },
    //获取加载条状态
    getAppLoadingStatus(){
      return this.getNowStatus()
    },
    cCount(){
      return this.getCommodityCount()
    }
  },
  methods:{
      open(path){
        this.$router.openPage(path)
      },
      isActive(name){
        return this.$route.path.indexOf(name)!=-1
      },
      //获取store中的状态
    //computed每次获取值的时候调用相应的函数
    ...mapGetters(['getNowStatus','getCommodityCount'])
  },
  //watch里的都是  需要监视变量的名字（newValue,oldValue）
  watch:{
    //监控this.$route的变化，设置过渡类名
    /**
     * 除了从购物车返回剩下的都没用，而且可以用router的守卫函数
     */
    $route(newV,oldV){
      if(oldV.query.time){
        if(newV.query.time>oldV.query.time){
          this.transitionName = 'slide-go'
        }else{
          this.transitionName = 'slide-back'
        }
      }else{
        this.transitionName = 'slide-go'
      }
    }
  },
  mounted(){
    new ShopCartTool(this.$store)
  }
}
</script>
<style lang="sass" type="text/sass">
@import "./assets/sass/public"
@import "./assets/font/iconfont.css"
// @import './assets/sass/footer.sass'


  //变量
$footer_height:1.43rem

//底部
.footer
    position: absolute
    bottom: 0
    background-color:#fff
    width: 100%
    height: $footer_height
    transition: transform .4s cubic-bezier(.55,0,.1,1)
    -webkit-transition: transform .4s cubic-bezier(.55,0,.1,1)
    box-shadow: 0 3px 14px 2px rgba(0,0,0,.12)
    -webkit-box-shadow: 0 3px 14px 2px rgba(0,0,0,.12)       
    .footer-item
        width: 25%
        text-align: center
        float: left  //使用浮动
        color: #999
        font-size: 0.32rem
        padding-bottom: 0.1rem
        padding-top: 0.12rem
        overflow: hidden
        .icon
            font-size: 0.6rem
    // 中间没空格，多类选择器，选择同时存在多个类的element
    .footer-item.active
        color: #ff6700




</style>
